//在src文件夹下面，新建router.js文件
import Vue from "vue";
import VueRouter from "vue-router";
import Login from "./pages/loginUser.vue";
import Home from "./pages/homePage.vue";
import NotFoundComponent from "./pages/NotFoundComponent.vue";
import Welcome from "./pages/Wel-come.vue";

Vue.use(VueRouter);
export default new VueRouter({
    mode: "history", //默认hash模式（url比较丑）,采用history模式
    routes: [
        { path: "/", component: Login },
        {
            path: "/home",
            component: Home,
            children: [
                {
                    path: "",
                    component: Welcome, //不使用路由传参数
                },
                {
                    path: "1",
                    component: Welcome,
                    props: { name: "使用静态参数" }, //使用路由静态参数
                },
                {
                    path: "2/:name",
                    component: Welcome,
                    props: true, //使用路由动态传递参数
                },
                {
                    path: "3/:name",
                    component: Welcome,
                    props: (route) => {
                        //使用路由动态态值与基于路由的值结合传递参数
                        const now = new Date();
                        return {
                            name: `动态态值与基于路由的值结合,--${route.params.name
                                }--${now.getSeconds()}秒`,
                        };
                    },
                },
            ],
        },
        { path: "*", component: NotFoundComponent }, //页面404
    ],
});

